<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="500" height="500" style="border: 1px solid red;">
			
		</canvas>
	</body>
	<script type="text/javascript">
//		var canvas = document.getElementById("canvas");
//		var context = canvas.getContext("2d");
//		
//		context.beginPath();
//		
//		context.moveTo(0,0);
//		context.lineTo(500,500);
//		
//		context.moveTo(500,0);
//		context.lineTo(0,500);
//		
//		context.stroke();
//		
//		context.strokeStyle = "yellow"
//		context.lineWidth = 1
//		context.strokeRect(10,10,480,480)
		
		function draw(){
			var canvas = document.getElementById("canvas");
			var context = canvas.getContext("2d");
			
			context.beginPath();
			
			
			context.stroke();
//			context.strokeStyle = "rgb(100,100,100)";
			context.strokeRect(0,0,500,500);
			context.strokeRect(200,200,100,100);
			
			for (i=0;i<10;i++) {
				color = i*30;
				g = color.toString(16);
				b = (255-color).toString(16);
				context.strokeStyle = "#ff" + g + b;
//				context.strokeStyle = "rgb(0+(i+1)*20,0+(i+1)*20,0+(i+1)*20)";
				context.strokeRect(200-(i+1)*20,200-(i+1)*20,100+(i+1)*40,100+(i+1)*40);
			}
			
		}
		window.addEventListener("load",draw,true);
	</script>
</html>
